<template>
  <div id="headerSimple" class="headerSimple">
	  <x-header :left-options="{showBack: false}">
		  <x-icon slot="overwrite-left" type="ios-arrow-back" size="16" class="backIcon" @click="goBack"></x-icon>
		  <span slot="overwrite-left" style="color: white; font-weight: bold; font-size: 16px">{{title}}</span>
		  <img slot="right" width="20" style="display:block;margin-right:10px;margin-top: 2px;" src="@/assets/svg/icon_new.svg" @click="newElement">
	  </x-header>
  </div>
</template>

<script>
	import bus from '@/event/eventBus'
  import { XHeader } from 'vux'

  export default {
    name: 'topSimpleWithShare',
    components: {
      XHeader
    },
    data () {
      return {
      	title: '',
	      menus: {
		      newElement: ''
	      },
	      showMenus: false,
	      newCompDetails: '',
	      newCompParams: '',
	      filter: ''
      }
    },
	  created: function () {
    	let _this = this
		  bus.$on("setTopSimpleWithNewTitle", function (msg) {
			  _this.title = msg
		  })

		  bus.$on("setNewElement", function (msg) {
			  _this.menus.newElement = msg
		  })

		  bus.$on("setNewCompDetails", function (msg) {
			  _this.newCompDetails = msg
		  })

		  bus.$on("setNewCompParams", function (msg) {
			  _this.newCompParams = msg
		  })

		  bus.$on("setNewCompFilter", function (msg) {
			  _this.filter = msg
		  })
	  },
	  methods: {
		  goBack() {
			  this.$router.go(-1)
		  },
		  newElement() {
			  this.$router.push({name: this.newCompDetails, params: {title: this.title, params: this.newCompParams, filter: this.filter}})
		  }
	  }
  }
</script>

<style>

	.headerSimple > .vux-header > .vux-header-title {
		text-align: left;
		padding-left: 45px;
	}

	.vux-header {
		background-color: #44abe2 !important;
	}

	.headerSimple {
		width: 100%;
		position: fixed;
		left: 0px;
		top: 0px;
		z-index: 9999;
	}

	.backIcon {
		fill: #fff;
		position: relative;
		margin-right: 15px;
		top: 2px !important;
		left: 5px !important;
	}
</style>
